<template>
  <MyDialog title="拨号结果" :visible="dialogVisible" @ok="close" @close="close">
    <div class="box">
      <div v-for="(item, index) in result" :key="index" class="box-item">
        <div class="item">
          <div class="item-label">
            网卡：
          </div>
          <div class="item-value">
            {{ item.name }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            速率：
          </div>
          <div class="item-value">
            {{ item.speed }}M
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            IP：
          </div>
          <div class="item-value">
            {{ item.ip?item.ip:'-' }}
          </div>
        </div>
        <div class="item-list">
          <div v-for="(it, ind) in item.dialingInfo" :key="ind" class="dialingInfo">
            <div class="item">
              <div class="item-label">
                ip
              </div>
              <div class="item-value">
                {{ it.ip }}
              </div>
            </div>
            <div class="item">
              <div class="item-label">
                vlan_id
              </div>
              <div class="item-value">
                {{ it.vlanId }}
              </div>
            </div>
            <div class="item">
              <div class="item-label">
                账号
              </div>
              <div class="item-value">
                {{ it.account }}
              </div>
            </div>
            <div class="item">
              <div class="item-label">
                密码
              </div>
              <div class="item-value">
                {{ it.passWord }}
              </div>
            </div>
            <div class="item">
              <div class="item-label">
                链接状态
              </div>
              <div class="item-value">
                {{ it.connected?'已连接':'未连接' }}/{{ it.successed?'已上网' : '已断开' }}
              </div>
            </div>
            <div class="item">
              <div class="item-label">
                IPv6状态
              </div>
              <div class="item-value">
                {{ it.v6Connected ? '已连接' : '未连接' }}/{{ it.v6Successed ? '已上网' : '已断开' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="result.length == 0">
        <p>暂无数据</p>
      </div>
    </div>
  </MyDialog>
</template>
<script>
import { dialing } from "@/api/deviceManage";
import dialogMixin from "@/mixins/dialogMixin";
export default {
  mixins: [dialogMixin],
  props: {
    sn: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: true,
      result: [],
    };
  },
  mounted() {
    this.dialingReq();
  },
  methods: {
    dialingReq() {
      dialing(this.sn).then(res => {
        console.log(res);
        // this.result = res.data;
        for (let i = 0; i < res.data.length; i++) {
          this.result.push(res.data[i])
          this.result.push(res.data[i])
          this.result.push(res.data[i])
        }
        this.dialogVisible = true;
      }).catch(err => {
        console.log(err)
      })
    },
  }
};
</script>
<style  lang="scss" scoped>
.box {
  line-height: 36px;
  font-size: 14px;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
}
.box-item {
  width: 47%;
  padding: 3px 0;
  margin:0 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.item {
  display: flex;
}
.item-list {
  display: flex;
  flex-direction: column;
}
.dialingInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid #ccc;
  border-radius: 8px;
  line-height: 20px;
  font-size: 12px;
  padding: 3px 0;
}
.item-label {
  padding-left: 10px;
  width: 80px;
}
.item-value {
  width: 200px;
}
</style>
